/*
    自定义的js脚本
 */

$(function(){
    //当文档加载完成才会执行
      function resize() {
          //获取屏幕宽度
          var windowWidth = $(window).width();
          //判断屏幕属于大还是小
          var isSmallScreen = windowWidth<768;
          //根据大小为界面上的每一张轮播图设置背景
          /*$('#main_ad > .carousel-inner > .item') 获取到的是一个DOM数组，多个对象 */
          $('#main_ad > .carousel-inner > .item').each(function (i,item) {
              var $item = $(item);  //因为拿到的是DOM对象需要转换。
              var imgSrc = $item.data(isSmallScreen? 'image-xs':'image-lg');
              /* 写法二 :
               var imgSrc =
               isSmallScreen
               ? $item.data('image-xs')
               : $item.data('image-lg');
              * */

              //设置背景图片
              $item.css('backgroundImage','url("'+imgSrc+'")')

              //因为我们需要小图时 尺寸等比例变化 所以小图时我们使用img方式
              if(isSmallScreen){
                  // $item 就是我们遍历到的每个DOM对象（div标签）
                  $item.html('<img src="' + imgSrc + '" alt="" />');
              }else{
                  //这个时候div里面有一个img元素，变大的时候没有消除，给清除一下就可以了
                  $item.empty();
              }
          })
      }

      // $(window).on('resize',resize());
      // //让window对象立即触发一下resize
      // $(window).trigger('resize');

    $(window).on('resize',resize).trigger('resize');

      //初始化tooltips插件
    $('[data-toggle="tooltip"]').tooltip();

    /**
     * 控制标签页的标签容器宽度
     */
    var $ulContainer = $('.nav-tabs');
    //获取所有子元素的宽度和
    var width = 30;     //因为原本ul上有padding-left
    //遍历子元素
    $ulContainer.children().each(function (index,element) {
        //console.log(element.clientWidth);
        //console.log($(element).width());
        width += element.clientWidth;
    })
    //此时width等于所有li的宽度总和
    //判断当前ul的宽度是否超出屏幕，如果超出就显示横向滚动条
    if(width > $(window).width()){
        $ulContainer.css('width',width).parent().css('overflow-x','scroll');
    }



    // a点击注册事件
    //将全局变量本地化
    var $newTitle = $('.news-title');
    $("#news .nav-pills a").on("click",function () {
        //获取当前点击元素
        var $this = $(this);
        //获取对应的title值
        var title = $this.data('title');
        //将title值设置到相应的位置
        $newTitle.text(title);
    });

});